<template>
  <div>
    <div id="mars3dcontent"></div>
    <div>
      <el-dialog class="dialog" v-model="dialogVisible" title="新增资源" width="380">
        <div class="dailogitem">
          <span>数据类型</span>
          <el-select
            v-model="datatypeSelect"
            placeholder="数据类型选择"
            style="width: 240px"
          >
            <el-option
              v-for="item in datatypeselectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="dailogitem">
          <span>资源</span>
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :limit="3"
            :on-exceed="handleExceed"
          >
            <el-button type="primary">Click to upload</el-button>
            <template #tip>
              <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
            </template>
          </el-upload>
        </div>
        <div class="dailogitemdetail">
          <span>数据格式</span>
          <span style="margin-left: 30px;margin-top: 10px;">平面坐标系统采用CGCS2000国家大地坐标系</span>
          <span style="margin-left: 30px;margin-top: 10px;">高程系统: 1985国家高程系统</span>
          <div style="margin-left: 30px;margin-top: 10px;">
            <span style="margin-top: 10px;">数据模板:</span>
            <span style="margin-left: 30px;margin-top: 10px;">样例下载</span>
          </div>
        </div>
        <template #footer>
        <div class="dialog-footer">
            <el-button @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="closeDialog">
            确定
            </el-button>
        </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"; //依赖的cesium库本身css
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { onMounted, onUnmounted, reactive } from "vue";
import { mapOptions, layers } from "@/utils/mapOptions";
import { destroyMap, flytoView } from "@/utils/Lmap";

let map;

let datatypeSelect = ref("");
let dialogVisible = ref(true);

let datatypeselectOptions = [
  {
    label: "管网点",
    value: "pipPoint",
  },
  {
    label: "管网线",
    value: "pipLine",
  },
  {
    label: "管网模型",
    value: "pipModel",
  },
  {
    label: "影像数据",
    value: "image",
  },
  {
    label: "城市模型",
    value: "cityModel",
  },
];

let tileLayer = new mars3d.layer.ArcGisLayer({
  url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
  enablePickFeatures: false,
});

onMounted(() => {
  map = new mars3d.Map("mars3dcontent");
  flytoView(map, mapOptions.scene.center);
  map.addLayer(tileLayer);
});

onUnmounted(() => {
  destroyMap(map);
});


function closeDialog(){
  dialogVisible.value = false;
}
</script>

<style>
.el-dialog {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.el-dialog .dailogitem{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 15px;
}

.dailogitemdetail{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
</style>
